<template>
  <div class="bigBox">
    <!-- 搜索 -->
    <div class="search">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="区域搜索">
          <el-input v-model="areaName" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 主题内容 -->
    <el-card>
      <!-- 新增角色按钮 -->
      <el-row style="height: 60px">
        <el-button
          icon="el-icon-plus"
          size="small"
          type="primary"
          @click="add"
        >新增</el-button>
      </el-row>
      <!-- 表格 -->
      <el-table :data="roleList">
        <el-table-column
          label="序号"
          align="center"
          type="index"
          width="120"
        />
        <el-table-column
          label="区域名称"
          align="center"
          width="120"
          prop="name"
        />
        <el-table-column
          label="点位数"
          align="center"
          width="560"
          prop="nodeCount"
        />
        <el-table-column
          label="备注说明"
          align="center"
          width="580"
          prop="remark"
        />
        <el-table-column label="操作" width="300">
          <template #default="{ row }">
            <!-- <template class="three"> -->
            <a style="color:blue" @click="viewDetails(row)">查看详情</a>
            <a style="margin-left:18px;color:blue" @click="add(row)">修改</a>
            <a style="margin-left:18px;color:red" @click="del(row.id)">删除</a>
          </template>
        </el-table-column>
      </el-table>
      <el-row class="bottom">
        <el-col :span="20">
          <div>共{{ areaList.totalCount }}条数据 第{{ areaList.pageIndex }}/{{ areaList.totalPage }}页</div>
        </el-col>
        <el-col :span="4">
          <el-button-group>
            <el-button type="warning" icon="el-icon-arrow-left" :disabled="upShow" @click="up">上一页</el-button>
            <el-button type="warning" style="margin-left:20px;" :disabled="underShow" @click="under">下一页<i class="el-icon-arrow-right el-icon--right" /></el-button>
          </el-button-group>
        </el-col>
      </el-row>
    </el-card>
    <!-- add新增的弹出框 -->
    <el-dialog
      title="新增区域"
      :visible.sync="addShow"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="区域名称" prop="regionName">
          <el-input v-model="ruleForm.regionName" />
        </el-form-item>
        <el-form-item label="备注说明" prop="remark">
          <el-input v-model="ruleForm.remark" type="textarea" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addShow = false">取 消</el-button>
        <el-button type="primary" @click="addSure">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="区域详情"
      :visible.sync="detailsShow"
      width="30%"
      :before-close="detailsShowFn"
    >
      <!-- {{ tableData[0].region.name }} -->
      <div>区域名称:{{ xiangXi.name }}</div>
      <div>
        <span>包含点位</span>
        <span>
          <el-table
            :data="tableData"
            style="width: 100%"
          >
            <el-table-column
              type="index"
              label="序号"
              width="180"
            />
            <el-table-column
              prop="name"
              label="点位名称"
              width="180"
            />
            <el-table-column
              prop="vmCount"
              label="设备数量"
              width="180"
            />
          </el-table>
        </span>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import { areaList, addZone, pointSearch, modifyArea, delZone } from '@/api'
export default {
  data() {
    return {
      row: {}, // 判断哪个点击的
      xiangXi: {},
      tableData: [], // 详细
      detailsShow: false, // 区域详情的关闭
      // 新增输入框的数据
      ruleForm: {
        regionName: '', // 区域名称
        remark: '' // 备注说明
      },
      rules: {
        regionName: {
          required: true,
          message: '区域名称不能为空',
          trigger: 'blur'
        },
        remark: [
          { required: true, message: '备注说明不能为空', trigger: 'blur' },
          { max: 40, message: '输入字数不能超过40', trigger: 'change' }
        ]
      },
      addShow: false, // 控制添加窗口
      upShow: false, // 上下页的禁用状态
      underShow: false,
      areaName: '', // 绑定输入框 区域搜索
      roleList: [], // 渲染数据
      areaList: {} // 全部数据
    }
  },
  async created() {
    this.publicApi()
  },
  methods: {
    del(id) {
      // 删除
      this.$confirm('真的要删除吗?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        console.log(this.areaList)
        // 2. 调用接口
        await delZone(id)
        // 提示用户
        this.$message.success('删除成功')
        // 删除最后一页最后一条数据时，页数减 1
        if (this.areaList.currentPageRecords.length === 1 && this.areaList.pageIndex > 1) {
          this.areaList.pageIndex--
        }
        this.publicApi()
      }).catch(error => {
        console.log(error)
      })
    },
    detailsShowFn() {
      // 产看详情的关闭方法
      this.detailsShow = false
    },
    // 查看详情
    async viewDetails(val) {
      this.detailsShow = true
      console.log(val)
      this.xiangXi = val
      // const res = await zoneDetails(val.id)
      // console.log(res)
      const { data } = await pointSearch({ regionId: val.id })
      this.tableData = data.currentPageRecords
      // console.log(res)
    },
    async addSure() {
      // 新增的确认提交
      this.$refs.ruleForm.validate(async(valid) => {
        if (!valid) return
        if (this.row.name) {
          await modifyArea(this.row.id, this.ruleForm)
          this.publicApi()
          this.handleClose()
          this.$message.success('修改成功')
        } else {
          await addZone(this.ruleForm)
          this.publicApi()
          this.handleClose()
          this.$message.success('添加成功')
        }
      })
    },
    handleClose() {
      // 添加窗口的关闭方法
      this.addShow = false
      this.$refs.ruleForm.resetFields()
    },
    // 搜索部分
    onSubmit() {
      // 查询的按钮areaName
      this.publicApi(this.areaName)
    },
    // 新增的按钮
    add(row) {
      this.row = row
      this.addShow = true
      if (row.name) {
        this.ruleForm.regionName = row.name
        this.ruleForm.remark = row.remark
      }
    },
    // 公共调用
    async publicApi(name, pageIndexs, pageSize) {
      const { data } = await areaList({
        name: name,
        pageIndex: pageIndexs,
        pageSize: pageSize
      })
      this.areaList = data
      if (data.pageIndex <= 1) {
        this.upShow = true
      } else {
        this.upShow = false
      }
      if (data.pageIndex === data.totalPage) {
        this.underShow = true
      } else {
        this.underShow = false
      }
      this.roleList = data.currentPageRecords
    },
    up() {
      // 上一页
      this.publicApi('', +this.areaList.pageIndex - 1, this.areaList.pageSize)
    },
    under() {
      // 下一页
      this.publicApi('', +this.areaList.pageIndex + 1, this.areaList.pageSize)
    }
  }
}
</script>
<style lang="scss" scoped>
.bigBox {
  padding: 20px;
  .search {
    background-color: #fff;
    padding: 10px;
    padding-bottom: 0px;
  }
}
.bottom {
  margin-top: 30px;
}
</style>
